<template>
  <div class="boot center">
    <h1>WELOCME</h1>
  </div>
  <div class="main center">
    <div style="background-color: #f2f3f5;height: 300px;">
      <div class="introduction">
        <h2 class="title">
          图书馆简介
        </h2>
        <div class="text">
          &nbsp;&nbsp;本图书馆成立于1999年,是一所综合性的公共图书馆,
          为广大读者提供丰富的图书、期刊、报纸、电子资源等文献信息服务。
          本图书馆拥有现代化的建筑设施,设有自助借还书系统、多媒体阅览室、数字化阅览室、儿童阅览室等功能区域,满足不同读者的需求。
          本图书馆还定期举办各类文化活动,如讲座、展览、读书会等,为读者提供一个学习交流的平台。欢迎广大读者光临本图书馆,享受阅读的乐趣。
        </div>
      </div>
    </div>
    <div >
      <div class="introduction">
        <h2 class="title">
          图书馆活动
        </h2>
        <el-tabs
          :tab-position="'left'"
          style="height: 200px"
          class="demo-tabs"
          type="border-card"
        >
          <el-tab-pane label="读书分享会" class="text">
            每周五下午3点,图书馆邀请一位优秀的读者,与大家分享他/她最喜欢的一本书,以及阅读的心得和感受。你可以在现场提问、交流、讨论,也可以带上自己喜欢的书来分享。
          </el-tab-pane>
          <el-tab-pane label="书法展览" class="text">
            为了展示中华优秀传统文化,图书馆特别策划了一场书法展览,展出了各个朝代的名家名作,以及当代书法家的精品力作。你可以在展览中欣赏书法的魅力,学习书法的技巧,也可以亲自动手试试。
          </el-tab-pane>
          <el-tab-pane label="诗歌朗诵会" class="text">
            为了培养读者的语言表达和审美能力,图书馆特别举办了一场诗歌朗诵会,邀请了几位著名的诗人和朗诵家,为大家带来了经典和现代的诗歌作品。
            你可以在朗诵会中感受诗歌的韵律和意境,也可以自己创作和朗诵诗歌。
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <div style="background-color: #f2f3f5;height: 300px;">
      <div class="introduction">
        <h2 class="title">
          办馆理念
        </h2>
        <div class="text" style="text-align: center;">
          以用户为中心，满足用户的多元化、个性化、智能化的信息需求，提供优质、高效、便捷、全面的信息服务。<br/>
          以资源为基础，建设丰富、权威、系统、更新的文献资源体系，实现实体资源和数字资源的有机结合，支持学校的教学科研和社会服务<br/>
          以技术为引领，运用先进的信息技术和网络技术，改善图书馆的硬件设施和软件环境，提升图书馆的服务水平和管理效率<br/>
          以服务为导向，坚持创新、开放、合作、共享的理念，开展多样化、特色化、人性化的文化活动，促进图书馆与用户、社会、其他图书馆的交流与互动<br/>
        </div>
      </div>
    </div>
    <div style="background-color: #73767a;height: 300px;">
      <div class="introduction">
        <div class="text" style="text-align: center; display: flex;flex-direction: row;">
          <div style="width: 30%;margin-right: 40%;">
            <div style="margin-bottom: 10px; color: white;">相关链接</div>
            <div style="display: flex;flex-direction: row;flex-flow:row wrap;line-height: 30px;">
                <el-link class="link" href="http://www.calis.edu.cn/">CALIS</el-link>
                <el-link class="link" href="www.csu.edu.cn">中南大学</el-link>
                <el-link class="link" href="http://www.paper.edu.cn/">中国科技论文在线</el-link>
                <el-link class="link" href="https://www.nstl.gov.cn/index.html">国家科技图书文献中心</el-link>
            </div>
          </div>
          <div style="width: 30%;margin-right: 2%;">
            <div style="margin-bottom: 10px;color: white">关于我们</div>
            <div style="text-align: center;color: whitesmoke;line-height: 30px;">
                作者:中南大学软件工程2104班小组<br/>
                邮编:410083<br/>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup></script>

<style scoped>
.boot {
  width: 400px;
  height: 70px;
  line-height: 70px;
  border: 2px solid #909399;
}
.center {
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
}
.main {
  margin-top: 100px;
  width: 100%;
}
.title{
    margin-bottom: 10px;
    color: #337ecc;
    font-weight: lighter;
    font-size: 30px;
}
.text{
    letter-spacing: 3px; 
    text-align: left; 
    font-weight: 200;
}
.introduction {
  width: 70%;
  margin-left: 15%;
  padding-top: 20px;
  padding-bottom: 20px;
}
.boot > h1 {
  color: #409eff;
  font-weight: lighter;
  font-size: 60px;
  letter-spacing: 5px;
}
.link{
    color: white; 
    margin-right: 20px;
}
</style>
